/**
 * DoAgree用户需知组件
 * @param {*} options 
 *              - domId 绑定的domId
 *              - borderColor CheckBox的边框颜色
 *              - iconColor CheckBox的边框颜色
 *              - fontColor 勾选代表同意字体颜色
 *              - contractColor 用户需知字体颜色
 *              - onCheckboxClick CheckBox点击回调事件
 * @template
 * 有色背景
 *  borderColor: '#fff'
 *  iconColor: '#fff'
 *  fontColor: '#fff'
 *  contractColor: '#ffa828'
 * 
 * 白色背景
 *  borderColor: '#c9c9c9'
 *  iconColor: '#c9c9c9'
 *  fontColor: '#000'
 *  contractColor: '#2039a7'
 */
 var DoAgree = function(options) {
    const $this = this;

    $this.checked = true; // checkbox是否选中
    $this.domId = options.domId;
    $this.checkboxId = $this.domId + 'Box';
    $this.errMsgId = $this.domId + 'Err';

    var borderColor = options.borderColor || '#8a8787';
    var iconColor = options.iconColor || '#8a8787';
    var fontColor = options.fontColor || '#333';
    var contractColor = options.contractColor || '#ff9800';

    var checkbox = document.createElement('div');
    checkbox.id = $this.checkboxId;
    checkbox.className = 'agree-checkbox';
    checkbox.style.cssText = 'display: flex; justify-content: center; align-items: center; width: .8rem;' 
    + 'height: .8rem; border: 2px solid '+ borderColor +'; font-weight: bold; border-radius: 4px; color: '+ iconColor + ';'
    checkbox.innerText = '√';
    // checkbox点击事件
    checkbox.onclick = function() {
        checkbox.innerText = checkbox.innerText ? '' : '√';
        $this.checked = checkbox.innerText ?  true: false;
        let errMsg = document.getElementById($this.errMsgId);
        if (errMsg) {
            errMsg.style.display = checkbox.innerText ? 'none' : 'block';
        }

        // 处理回调
        options.onCheckboxClick && options.onCheckboxClick($this.checked);
    }

    var tip = document.createElement('div');
    tip.className = 'agree-tip';
    tip.style.cssText = 'display: flex; justify-content: center; align-items: center; padding-left: .2rem; color: ' + fontColor + ';'
    tip.innerText = '勾选代表同意';

    var contract = document.createElement('div');
    contract.className = 'agree-contract';
    contract.style.cssText = 'display: flex; justify-content: center; align-items: center; text-decoration: underline;'
    +'color: '+ contractColor + ';'
    contract.innerText = '《用户需知》';
    // 用户需知点击事件
    contract.onclick = function() {
        $this.contract();
    }

    // 构建同意需知组件
    var doAgreeWrap = $id(options.domId);
    doAgreeWrap.style.marginTop = '0.4rem';
    doAgreeWrap.style.display = 'flex';
    doAgreeWrap.style.justifyContent = 'center';

    doAgreeWrap.appendChild(checkbox);
    doAgreeWrap.appendChild(tip);
    doAgreeWrap.appendChild(contract);

    // 错误信息
    var errMsg = document.createElement('div');
    errMsg.id = $this.errMsgId;
    errMsg.style.cssText = 'color: #ffa828; text-align: center; margin-top: .2rem; display: none;';
    errMsg.innerText = '请先同意《用户须知》后再提交报名。';

    // 错误信息放到同意需知后面
    insertAfter(errMsg, doAgreeWrap);
}

/**
 * DoAgree的原型方法，主要用以构建用户需知的弹窗
 */
DoAgree.prototype = {
    contractHide: function() {
        var node = document.getElementById('agreeContainer');
        if (node) {
            var pNode = node.parentNode;
            pNode.removeChild(node);
        }
    },

    contract: function(domId) {
        const $this = this;

        // 遮罩层
        var mask = document.createElement('div');
        mask.id = 'mask';
        mask.style.cssText = 'position: relative; justify-content: center; display: flex; align-items: center; '
        + 'visibility: visibble; max-width: 15rem; margin: 0 auto; height: 100%; background: #eeeeee80;'
        mask.onclick = function() {
            $this.contractHide();
        }
        
        var dialog = document.createElement('div');
        dialog.id = 'dialog';
        dialog.style.cssText = 'position: relative; visibility: visibble; padding: 30px 20px; overflow: auto;'
        +' width: 80%; height: 75%; background: #fff; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);'
        mask.appendChild(dialog);

        // 构建用户需知
        var dataSources = ['用户须知', '1.本产品仅针对本页面展示的标识内容。', '2.平台在不同渠道对产品有不同的宣推策略，故从不同渠道购买本产品，以当前渠道活动为标准。',
    '3.本平台有权单方面对产品价格、产品信息及库存进行调整。', '4.用户须同意提供必要可用及准确的个人资料。本平台须对用户的个人隐私资料进行保护，承诺不会擅自将用户的个人资料信息有意泄露、出租或出售给任何第三方。', 
    '5.本课程为线上虚拟产品，不涉及发货，一经购买不退不换。', '6.未经51CTO书面同意，用户不得向任何第三方透漏课程及辅导资料内容。', 
    '7.若用户发生影响正常教学的行为，平台可终止对此用户的权限及服务。', '8.购买成功后，请务必按照页面指引添加班主任老师微信，进群学习。', '9.特训营的课程为平台特制短期体验课，为用户提供方向与思路。'];
        var p = null;
        for (var i = 0, len = dataSources.length; i < len; i++) {
            p = document.createElement('p');
            p.innerText = dataSources[i];

            if (i === 0) {
                p.style.textAlign = 'center';
                p.style.fontWeight = 'bold';
            } else {
                p.style.marginTop = '0.4rem';
            }
            dialog.appendChild(p);
        }
        // 关闭按钮
        var closeBtn = document.createElement('div');
        closeBtn.style.cssText = 'position: absolute; top: 20px; right: 20px;';
        closeBtn.innerText = '×';
        dialog.appendChild(closeBtn);
        // 关闭按钮点击事件
        closeBtn.onclick = function() {
            $this.contractHide();
        }

        var agreeContainer = document.createElement('div');
        agreeContainer.id = 'agreeContainer';
        agreeContainer.style.cssText = 'position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; right: 20px;';
        agreeContainer.appendChild(mask);
        document.body.appendChild(agreeContainer);
    }
}

/**
 * 获取指定id的dom对象
 * @param {String} id 
 * @returns 指定id的dom对象
 */
 function $id(id) {
    return document.getElementById(id);
};

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}